<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>加载WMS服务</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        //定义图层类
        var tilelayer;
        
        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');
            
            //构造瓦片图层管理对象（视图）
            var layer = new CesiumZondy.Layer.TilesLayer({
                viewer: webGlobe.viewer
            });
            //参数
            var options = {
                tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
                //瓦片初始级的列数 默认为2
                colNum: 2,
                //瓦片初始级的行数 默认为2
                rowNum: 1,
                //瓦片最大显示级数 默认为19
                maxLevel: 5,
                //如瓦片裁的不是256,则需设置下面两个参数
                //瓦片宽度
                tileWidth: 256,
                //瓦片高度
                tileHeight: 256
                // proxy: '/ZDproxy.ashx',//如不存在跨域可不设置
            };
            //添加MapGIS IGServer发布的瓦片地图服务
            var { protocol, ip, port } = window.webclient;
            tilelayer = layer.appendMapGISTile(
                `${protocol}://${ip}:${port}/igs/rest/mrms/tile/250DEM`,
                options
            );
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'></div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>